<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>资产详情</title>
    <script src="echarts.min.js"></script>
    <script src="dark.js"></script>
    <link rel="stylesheet" href="bootstrap.min.css">  
	<script src="jquery.min.js"></script>
	<script src="bootstrap.min.js"></script>
	
	
    <link href="datatables.min.css" rel="stylesheet" type="text/css" />
    <link href="datatables.bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="components.min.css" rel="stylesheet" id="style_components" type="text/css" />
    <link href="plugins.min.css" rel="stylesheet" type="text/css" />
    <script src="datatables.min.js" type="text/javascript"></script>
    <script src="datatables.bootstrap.js" type="text/javascript"></script>
    <!--添加全局申请ip-->
    <script src="../gobal_ip/gobal_ip.js" type="text/javascript"></script>
  <!--  <script src="table-datatables-colreorder.min.js" type="text/javascript"></script>-->
</head>

<body>
    <div class="container" >
    	<div class="row">
		    <div  class="col-md-6">
		    	<!--<h2 class="text-center">按安全事件的分类统计</h2><br>-->
		    	<div class="portlet light bordered">
		    		<div class="portlet-title">按安全事件的分类统计</div>
		    	<div id="chart1" style="width:490px; height:325px;"></div>
		    	</div>
		    </div>
		    <div class="col-md-6">
		    	<!--<h2 class="text-left">按时间的安全事件统计</h2><br>-->
		    	<div class="portlet light bordered">
		    		<div class="portlet-title">按时间的安全事件统计</div>
					<div class="text-left">
				    	<label class="checkbox-inline">
		  					<input type="radio"  onclick="fun('M')" name="optionsRadiosinline" id="optionsRadios3" 
		     					value="M" checked="true"> 按月
						</label>
					   	<label class="checkbox-inline">
					      	<input type="radio"  onclick="fun('w')" name="optionsRadiosinline" id="optionsRadios4" 
					         	value="w"> 按周
					   	</label>
					   	<label class="checkbox-inline">
		  					<input type="radio"  onclick="fun('d')" name="optionsRadiosinline" id="optionsRadios4" 
		     					value="d" > 按天
						</label>
					   	<label class="checkbox-inline">
					      	<input type="radio"  onclick="fun('H')" name="optionsRadiosinline" id="optionsRadios5" 
					         	value="H"> 按小时
					   	</label>
				   	</div>
			    	<div id="chart2" style="width:580px; height: 300px;"></div>
	    		<!--</div>-->
		    </div>
		    <!--<div calss="col-md-4">

		    </div>-->
		    <!--初始化表格-->
			<script>
				
				
			</script>
			
			<script>
			    //var zcid="ZC00001";//getUrlParam('reurl');
				var zcid=getUrlParam('id');
				console.log(zcid);
				 function getUrlParam(name) {
					var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
					var r = window.location.search.substr(1).match(reg);  //匹配目标参数
					if (r != null) return unescape(r[2]); return null; //返回参数值
					}
		
				$.getTwoDensionArr=function(dension,len)
					{
						var arr=new Array();
						for(var i=0;i<dension;i++)
						{
							arr[i]=new Array();
							for(var j=0;j<len;j++)
							{
								arr[i][j]="dafault";
							}
						}
						return arr;
					}
				//var event_table = $.getTwoDensionArr(0,4);
				//var eventtable_time = $.getTwoDensionArr(0,4);
				
				<!--后台指定读取某资源ID的数据,加载安全事件分类列表-->
				//参数 category start end id

				var  oTable=[];
				var jsonObj={category:"typeList",start:"2016-12-01 00:00:00",end:"2016-12-30 00:00:00",id:zcid}; 
					$.get(encodeURI("http://"+global_ip+"/networkassetinfocon/eventStat?param="+JSON.stringify(jsonObj)),function(data){
						var	event_table = $.getTwoDensionArr(data.data.length,4);
							tmp = [];
							$(data.data).each(function(index,items){
								tmp.push(items.name);
								tmp.push(items.count);
								tmp.push(items.first);
								tmp.push(items.last);
								event_table[index]=tmp;
								tmp=[];
							});
					
				 oTable=$('#sample_1').dataTable({
						"destroy": true,
						"data": event_table,			
						"pageLength": 10,
						"lengthChange": false,
						"info":false,
						 buttons: [
			                { extend: 'print', className: 'btn dark btn-outline' },
			                { extend: 'pdf', className: 'btn green btn-outline' },
			                { extend: 'csv', className: 'btn purple btn-outline ' }
			            ],
			            responsive: true,
						colReorder: {
			                reorderCallback: function () {
			                   // console.log( 'callback' );
			                }
			            },
			            "order": [
			                [0, 'asc']
			            ],
						"dom": "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>"
					});
					
					$("#sample_1 tbody").click(function (event) {
                        $(oTable.fnSettings().aoData).each(function () {
                            $(this.nTr).removeClass('selected');
                        });
                        $(event.target.parentNode).addClass('selected');
                    });

                $('#sample_1 tbody tr').click(function (event) {
                        var aData = oTable.fnGetData(this); // get datarow
                        if (null != aData)  // null if we clicked on title row
                        {
                            var tt = aData[0];
                           // alert(tt);
							//category start end id page size type
							var jsonObj3={category:"timeList",start:"2016-12-01 00:00:00",end:"2016-12-30 00:00:00",id:zcid,page:1,size:1000,type:tt}; 
							
							
								$.get(encodeURI("http://"+global_ip+"/networkassetinfocon/eventStat?param="+JSON.stringify(jsonObj3)),function(data){
									var	eventtable_time = $.getTwoDensionArr(data.data.length,4);
										tmp1 = [];
										$(data.data).each(function(index,items){
											tmp1.push(items.name);
											tmp1.push(items.atkIp);
											tmp1.push(items.atkdIp);
											tmp1.push(items.time);
											eventtable_time[index]=tmp1;
											tmp1=[];
										});
										
										$('#sample_2').dataTable({
										"destroy": true,
										"data": eventtable_time,			
										"pageLength": 10,
										"lengthChange": false,
										"info":false,
										 buttons: [
											{ extend: 'print', className: 'btn dark btn-outline' },
											{ extend: 'pdf', className: 'btn green btn-outline' },
											{ extend: 'csv', className: 'btn purple btn-outline ' }
										],
										responsive: true,
										colReorder: {
											reorderCallback: function () {
												//console.log( 'callback' );
											}
										},
										"order": [
											[0, 'asc']
										],
										"dom": "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>"
									});
									});
						}
                    });
				});
	
	
				    
 
 
				<!--后台读取指定资产ID和事件数据，按时段的安全事件统计列表（默认指定资产ID所有事件明细表）-->
				var jsonObj1={category:"timeList",start:"2016-12-01 00:00:00",end:"2016-12-30 00:00:00",id:zcid,page:1,size:1000}; 
					$.get(encodeURI("http://"+global_ip+"/networkassetinfocon/eventStat?param="+JSON.stringify(jsonObj1)),function(data){
						var	eventtable_time = $.getTwoDensionArr(data.data.length,4);
						tmp1 = [];
						$(data.data).each(function(index,items){
							tmp1.push(items.name);
							tmp1.push(items.atkIp);
							tmp1.push(items.atkdIp);
							tmp1.push(items.time);
							eventtable_time[index]=tmp1;
							tmp1=[];
						});
						
						$('#sample_2').dataTable({
						"destroy": true,
						"data": eventtable_time,			
						"pageLength": 10,
						"lengthChange": false,
						"info":false,
						 buttons: [
			                { extend: 'print', className: 'btn dark btn-outline' },
			                { extend: 'pdf', className: 'btn green btn-outline' },
			                { extend: 'csv', className: 'btn purple btn-outline ' }
			            ],
			            responsive: true,
						colReorder: {
			                reorderCallback: function () {
			                   // console.log( 'callback' );
			                }
			            },
			            "order": [
			                [0, 'asc']
			            ],
						"dom": "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>"
					});
				});
	
		        <!--安全事件类别图-->
				
				// 基于准备好的dom，初始化echarts实例
		        var myChart = echarts.init(document.getElementById('chart1'));
		        // 指定图表的配置项和数据
				var nameData=[];
				var legendData=[];
				var valueData=[];
				
				var jsonObj2={category:"typeList",start:"2016-12-01 00:00:00",end:"2016-12-30 00:00:00",id:zcid};
				//var jsonObj2={category:"typeList",start:"2016-12-01 00:00:00",end:"2016-12-30 00:00:00",id:"ZC00001"}; 
					$.get(encodeURI("http://"+global_ip+"/networkassetinfocon/eventStat?param="+JSON.stringify(jsonObj2)),function(data){
					
					
						$(data.data).each(function(index,item){
							nameData.push(
								item.name
							);
							legendData.push(
								item.name
							);
							valueData.push(
								item.count
							);
															
						});
					
			var allNameData=[];
				for(i=0;i<nameData.length;i++)
				{
					allNameData.push({
						type:'bar',
						name:nameData[i],
						data:[valueData[i]]

						 })
				}
					

					
			//console.log(nameData);
			var option = {
		            title: {
						//text: '按安全事件的分类统计'
		            },
		            tooltip: {
				//	trigger: 'axis'
					
					},
		            legend: {
					itemWidth:459,
					itemHeight:46,
					selectedMode:false,
						data: [{
							name: ' ',
							// 强制设置图形为圆。
							icon: 'image://./type.png' 
							}]
		              // data: [' '],
					   //data:nameData,
		            },
		            xAxis: {
		            	show:true,
						type:"category",
						boundaryGap: true,  
						data:nameData,
						axisLabel:{  
                         interval:0,//横轴信息全部显示  
                         rotate:-30,//-30度角倾斜显示  
                    }  
		            },
		            yAxis: {
					  //data:valueData
					},
		            //series:allNameData
					series:[{
						type:'bar',
						name:[' '],
						data:valueData,
						itemStyle: {
			                normal: {
			                    color: function(params) {
			                        var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', 
			                       	'#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074'
			                        ];
			                        return colorList[params.dataIndex]
			                    }
			                }
		            	}

						}]
		        };
		        myChart.setOption(option);
						
						
				});
		       
				//
				
				
				myChart.on('mouseover',function(params){
				//循环遍历
				//alert(params.name);
				
				
				 var aData = oTable.fnGetData();
					$(oTable.fnSettings().aoData).each(function (index,items) {
					//alert(aData[index][0]);
					var typename=aData[index][0];
					        if(typename==params.name)
                            {
								$(this.nTr).addClass('selected');
								
								
								var jsonObj4={category:"timeList",start:"2016-12-01 00:00:00",end:"2016-12-30 00:00:00",id:zcid,page:1,size:1000,type:typename}; 
							
							
								$.get(encodeURI("http://"+global_ip+"/networkassetinfocon/eventStat?param="+JSON.stringify(jsonObj4)),function(data){
									var	eventtable_time = $.getTwoDensionArr(data.data.length,4);
										tmp1 = [];
										$(data.data).each(function(index,items){
											tmp1.push(items.name);
											tmp1.push(items.atkIp);
											tmp1.push(items.atkdIp);
											tmp1.push(items.time);
											eventtable_time[index]=tmp1;
											tmp1=[];
										});
										
										$('#sample_2').dataTable({
										"destroy": true,
										"data": eventtable_time,			
										"pageLength": 10,
										"lengthChange": false,
										"info":false,
										 buttons: [
											{ extend: 'print', className: 'btn dark btn-outline' },
											{ extend: 'pdf', className: 'btn green btn-outline' },
											{ extend: 'csv', className: 'btn purple btn-outline ' }
										],
										responsive: true,
										colReorder: {
											reorderCallback: function () {
												//console.log( 'callback' );
											}
										},
										"order": [
											[0, 'asc']
										],
										"dom": "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>"
										});
									});
							}
							else{
								$(this.nTr).removeClass('selected');
							}
                        });
					
				});
				
				
			</script>
		    
		   
		</div>
		</div>
		<div class="row">
			<div  class="col-md-6">
				<div class="portlet light bordered">
					<div class="portlet-title">
						<div class="caption font-dark">
							<i class="icon-settings font-dark"></i>
							<span class="caption-subject bold uppercase">所对应的资产名称</span>
						</div>
						<div class="tools"> </div>
					</div>
					<div class="portlet-body">
						<table class="table table-striped table-bordered table-hover" id="sample_1">
							<thead>
								<tr>
									<th>事件名称</th>
									<th>发生次数</th>
									<th>首次发生时间</th>
									<th>最近发生时间</th>
								</tr>
							</thead>
							<tbody>
							</tbody>
						</table>
					</div>
				</div>
	    	</div>
	    	<div  class="col-md-6">
				<div class="portlet light bordered">
					<div class="portlet-title">
						<div class="caption font-dark">
							<i class="icon-settings font-dark"></i>
							<span class="caption-subject bold uppercase">攻击事件表</span>
						</div>
						<div class="tools"> </div>
					</div>
					<div class="portlet-body">
						<table class="table table-striped table-bordered table-hover" id="sample_2">
							<thead>
								<tr>
									<th>事件名称</th>
									<th>攻击IP</th>
									<th>被攻击IP</th>
									<th>攻击发生时间</th>
								</tr>
							</thead>
							<tbody>
							</tbody>
						</table>
					</div>
				</div>
	    	</div>
		</div>
		<div class="row">
			<div class="col-md-12 column">
			<div class="portlet light bordered">
				<div class="portlet-title">被攻击趋势</div>							
	    		<div id="chart3" style="width:1100px; height: 400px;"></div>
	    	</div>
	    	<script>
	    		var myCharts1 = echarts.init(document.getElementById('chart3'));
				function randomData() {
				    now = new Date(+now + oneDay);
				    value = value + Math.random() * 21 - 10;
				    return {
				        name: now.toString(),
				        value: [
				            [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
				            Math.round(value)
				        ]
				    }
				}
				
				var data1 = [];
				var timeData1 = [];
				var countData1 = [];
				
				var jsonObj5={category:"timeChart",id:zcid,start:"2016-12-26 00:00:00",precision:"d"};
					$.get(encodeURI("http://"+global_ip+"/networkassetinfocon/eventStat?param="+JSON.stringify(jsonObj5)),function(data){
						timeData1=[];
						countData1=[];
					  $(data.data).each(function(index,item){
							timeData1.push(
								item.time
							);
							countData1.push(
								item.count
							);	
							data1.push(item.count);
						})
			
					//console.log(data);
					
					//option
					var option12 = {
							title: {
								//text: 'Awesome Chart'
							},
							tooltip : {
								trigger: 'axis'
							},    
							xAxis: {
								data: timeData1
							},
							yAxis: {},
							series: [{
								type: 'line',
								data:countData1,
								markPoint: {
									data: [
										{type: 'max', name: '最大值'},
										{type: 'min', name: '最小值'}
									]
								},
								markLine: {
									smooth: true,
											effect: {
												show: true
											},
											distance: 10,
									label: {
										normal: {
											position: 'middle'
										}
									},
									symbol: ['none', 'none']
									//data: markLineData
								}
							}]
						};
				
					myCharts1.setOption(option12);
					
					
				});
	    	</script>
		</div>
		<!--按时间的事件统计图-->
		<script type="text/javascript">
			var timeData=[]
			var countData=[];
			var data_push={};
			var myChart2 = echarts.init(document.getElementById("chart2"));
			
            function fun(ddd){
			        //category id start precision
					
				var jsonObj5={category:"timeChart",id:zcid,start:"2016-12-26 00:00:00",precision:ddd};
					$.get(encodeURI("http://"+global_ip+"/networkassetinfocon/eventStat?param="+JSON.stringify(jsonObj5)),function(data){
						timeData=[];
						countData=[];
					  $(data.data).each(function(index,item){
							timeData.push(
								item.time
							);
							countData.push(
								item.count
							);	
								data_push.countData =countData;
								data_push.timeData=timeData;
						})
					
					var option11= {
						tooltip: {},
						xAxis: {
							data:timeData
						},
						yAxis: {},
						series: [
						{
							type:'bar',
							data: data_push.countData,
						}
						]
					};
					myChart2.setOption(option11);
					
					
				});	
				}
				myChart2.on('mouseover',function(params){
				var checkvalue=$('input:radio[name="optionsRadiosinline"]:checked').val();
				
				var starttime=timeData[params.dataIndex];
			//	console.log("初始"+starttime);
				var endtime="";
				var d=new Date();
				var sd=new Date();
					if(checkvalue=="M")
					{//系统时间倒推12个月//2016-12-26 00:00:00
						//starttime=d.setYear(d.getYear() - 1);
						var ds=starttime+"-01 00:00:00";
						starttime=ds;
					    d = new Date(ds);
						d.setMonth(d.getMonth()+1);
						
						
					}else if(checkvalue=="w")
					{//系统时间倒推4周（）
					 //var a = d.getDay();//今天周几
						var ds=starttime+" 00:00:00";
						starttime=ds;
					    d = new Date(ds);
						//sd=d;
						d.setDate(d.getDate()+7)//当前今天的前一周
					}else if(checkvalue=="H")
					{//系统时间倒推24小时
						 var ds=starttime+":00:00";
						starttime=ds;
					    d = new Date(ds);
						//sd=d;
						d.setHours(d.getHours()+1);
						
					}
					else if(checkvalue=="d")
					{//系统时间倒推7天
					   var ds=starttime+" 00:00:00";
						starttime=ds;
					    d = new Date(ds);
						//sd=d;
						d.setDate(d.getDate()+1);
						
					}
					else
					{
						 var ds=starttime+"-01 00:00:00";
						starttime=ds;
					    d = new Date(ds);
						//sd=d;
						d.setMonth(d.getMonth()+1);
					}
				   // starttime=Format(sd,"yyyy-MM-dd HH:mm:ss"); 
					endtime=Format(d,"yyyy-MM-dd HH:mm:ss"); 
				//	console.log("开始"+starttime);
				//	console.log("结束"+endtime);
					//alert(d+"月后是"+d.getFullYear()+"-"+d.getMonth()+"-"+d.getDate());
				  var jsonObj44={category:"timeList",start:starttime,end:endtime,id:zcid,page:1,size:1000};
				  $.get(encodeURI("http://"+global_ip+"/networkassetinfocon/eventStat?param="+JSON.stringify(jsonObj44)),function(data){
						var	eventtable_time = $.getTwoDensionArr(data.data.length,4);
						tmp1 = [];
						$(data.data).each(function(index,items){
							tmp1.push(items.name);
							tmp1.push(items.atkIp);
							tmp1.push(items.atkdIp);
							tmp1.push(items.time);
							eventtable_time[index]=tmp1;
							tmp1=[];
						});
						
						$('#sample_2').dataTable({
						"destroy": true,
						"data": eventtable_time,			
						"pageLength": 10,
						"lengthChange": false,
						"info":false,
						 buttons: [
			                { extend: 'print', className: 'btn dark btn-outline' },
			                { extend: 'pdf', className: 'btn green btn-outline' },
			                { extend: 'csv', className: 'btn purple btn-outline ' }
			            ],
			            responsive: true,
						colReorder: {
			                reorderCallback: function () {
			                  //  console.log( 'callback' );
			                }
			            },
			            "order": [
			                [0, 'asc']
			            ],
						"dom": "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>"
					});
				});
				  
			});
				 $(document).ready(function() {
				    fun('M');
				});
	function Format(now,mask)
    {
        var d = now;
        var zeroize = function (value, length)
        {
            if (!length) length = 2;
            value = String(value);
            for (var i = 0, zeros = ''; i < (length - value.length); i++)
            {
                zeros += '0';
            }
            return zeros + value;
        };
     
        return mask.replace(/"[^"]*"|'[^']*'|\b(?:d{1,4}|m{1,4}|yy(?:yy)?|([hHMstT])\1?|[lLZ])\b/g, function ($0)
        {
            switch ($0)
            {
                case 'd': return d.getDate();
                case 'dd': return zeroize(d.getDate());
                case 'ddd': return ['Sun', 'Mon', 'Tue', 'Wed', 'Thr', 'Fri', 'Sat'][d.getDay()];
                case 'dddd': return ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][d.getDay()];
                case 'M': return d.getMonth() + 1;
                case 'MM': return zeroize(d.getMonth() + 1);
                case 'MMM': return ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][d.getMonth()];
                case 'MMMM': return ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'][d.getMonth()];
                case 'yy': return String(d.getFullYear()).substr(2);
                case 'yyyy': return d.getFullYear();
                case 'h': return d.getHours() % 12 || 12;
                case 'hh': return zeroize(d.getHours() % 12 || 12);
                case 'H': return d.getHours();
                case 'HH': return zeroize(d.getHours());
                case 'm': return d.getMinutes();
                case 'mm': return zeroize(d.getMinutes());
                case 's': return d.getSeconds();
                case 'ss': return zeroize(d.getSeconds());
                case 'l': return zeroize(d.getMilliseconds(), 3);
                case 'L': var m = d.getMilliseconds();
                    if (m > 99) m = Math.round(m / 10);
                    return zeroize(m);
                case 'tt': return d.getHours() < 12 ? 'am' : 'pm';
                case 'TT': return d.getHours() < 12 ? 'AM' : 'PM';
                case 'Z': return d.toUTCString().match(/[A-Z]+$/);
                // Return quoted strings with the surrounding quotes removed
                default: return $0.substr(1, $0.length - 2);
            }
        });
    };
						
		</script>	
		</div>
    </div>
</body>
</html>